<template>
    <div>
        <avue-form :option="option" v-model="form" v-if="JSON.stringify(storeData)==='{}'"
                   :upload-preview="uploadPreview"
                   :upload-error="uploadError"
                   :upload-delete="uploadDelete"
                   :upload-after="uploadAfter"
                   @submit="submit"/>
        <div v-if="JSON.stringify(storeData)!=='{}'">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>审批结果</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="know" >我已知晓</el-button>
                </div>
                <div class="text item">
                    <h4>{{'商店名称: ' + storeData.storeName }}</h4>
                    <h4>{{'电话号码: ' + storeData.phone }}</h4>
                    <span style="font-size: 20px">商店图片:</span><img v-if="storeData.img" style="width: 100px;height: 100px" :src="'http://localhost:7777/'+storeData.img" class="image">
                    <h4>{{'是否通过: '}}
                        <span v-if="storeData.approval==='0'">未审批</span>
                        <span v-if="storeData.approval==='1'">通过</span>
                        <span v-if="storeData.approval==='2'">未通过</span>
                    </h4>
                    <h4>{{'原因: ' + storeData.reason }}</h4>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {getToken} from "@/util/auth";
    import {isvalidatemobile} from "@/util/validate";

    export default {
        name: "addstore",
        data() {
            return {
                storeData: {},
                userData:'',
                form: {
                    storeName:'',
                    img:'',
                    phone:'',
                },
                option: {
                    labelWidth: 120,
                    column: [
                        {
                            label: "商店名称",
                            prop: "storeName",
                            slot: true,
                            search: true,
                            rules: [{
                                required: true,
                                message: "请输入商店名称",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "商店图像",
                            prop: "img",
                            propsHttp: {
                                res: 'data'
                            },
                            type: 'upload',
                            listType: 'picture-img',
                            tip: '只能上传jpg/png用户头像，且不超过500kb',
                            action: '/api/pxx_commodity/commodity/uploadAvue',
                        },
                        {
                            label: "手机号",
                            prop: "phone",
                            rules: [{
                                required: true,
                                message: "请输入商店手机号",
                                trigger: "blur"
                            }]
                        },
                    ]
                }
            }
        },
        mounted(){
            this.getToken();
        },
        computed: {},
        created() {
        },
        methods: {
            getToken(){
                this.userData = JSON.parse(getToken());
                var id = this.userData.id
                this.$http({
                    method:"get",
                    url:"/api/pxx-store/store/approvalMessage",
                    params: {
                        userId: id
                    },
                }).then(res =>{
                    this.storeData = res.data.data
                });
            },
            know(){
                var id = this.storeData.data.id
                this.$http({
                    method:"post",
                    url:"/api/pxx-store/store/remove",
                    params: {
                        ids: id
                    },
                }).then(res =>{
                    this.$message({
                        type: "success",
                        message: "您可以重新申请！"
                    });
                });
                location.reload();
            },
            uploadDelete() {
                return this.$confirm(`是否确定移除该选项？`);
            },
            uploadError() {
                this.$message.success('上传失败')
            },
            uploadAfter(res, done) {
                done()
            },
            uploadPreview(file,column,done){
                done()//默认执行打开方法
            },
            submit() {
                if (this.form.img=== ''){
                    this.$message.error("商店没有图片!");
                    return;
                }
                this.form.img = this.form.img.replace("http://localhost:7777",'')
                var list = isvalidatemobile(this.form.phone);
                if (list.result === false) {
                    this.$message.error(list.msg);
                    return;
                }
                var store = this.form;
                store.loginId = this.userData.id;
                this.$http({
                    method:"post",
                    url:"/api/pxx-store/store/joinStore",
                    data: store,
                    headers: {'Content-Type': 'application/json'}
                }).then(res =>{
                    this.$message({
                        type: "success",
                        message: "申请成功，请等待审批结果!"
                    });
                });
                location.reload()
            },
        }
    };
</script>

<style scoped="scoped" lang="scss">
</style>
